<template>
    <div class="app-container" v-loading="globalLoading">
        <splitpanes class=" menu-split">
            <pane min-size="20" size="25" style="padding-right: 20px;" class="menu-panel">
                <div class="tool-wrapper">
                    <el-button-group>
                        <el-button type="primary" icon="Refresh" bg text @click="reload">刷新</el-button>
                        <el-button icon="Sort" bg text @click="toggleExpandAll">{{ isExpandAll ? '折叠' :
                            '展开'
                        }}</el-button>
                        <el-button type="primary" icon="edit" bg text @click="handleUpdateMenu" :disabled="!editable"
                            v-hasFunc="'menu:edit'">编辑</el-button>
                        <el-button type="primary" icon="plus" bg text @click="handleAddMenu" :disabled="!addable"
                            v-hasFunc="'menu:add'">新增</el-button>
                        <el-button type="danger" icon="delete" bg text @click="handleDelete" :disabled="!deleteable"
                            v-hasFunc="'menu:del'">删除</el-button>
                    </el-button-group>
                </div>
                <el-table v-loading="loading && !globalLoading" :data="menuTree" row-key="id"
                    :expand-row-keys="expandKeys" highlight-current-row
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="handleMenuToggle"
                    ref="menuRef">
                    <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true">
                        <template #default="{ row }">
                            <div class="cell-name">
                                <IconPlus :name="row.icon" v-if="row.icon" style="display: unset;" />
                                <span>{{ row.name }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isActive" label="状态" width="80">
                        <template #default="scope">
                            <dict-tag :options="sys_normal_disable" :value="scope.row.isActive" />
                        </template>
                    </el-table-column>
                </el-table>
            </pane>
            <pane min-size="20" style="padding-right: 20px;" class="info-panel"
                v-loading="!globalLoading && toggleLoading">
                <splitpanes horizontal>
                    <pane :size="(currentMenu?.menuType == 0) ? 100 : 45">
                        <Description v-model="currentMenu" @edit-event="handleUpdateMenu" />
                    </pane>
                    <pane v-show="currentMenu?.menuType == 1">
                        <m-buttons v-model="currentMenu.children" @action-event="onButtonEvents" />
                    </pane>
                </splitpanes>
            </pane>
        </splitpanes>
        <MenuEdit v-model="menuId" ref="editRef" @confirm-event="reload" />
        <CompEdit v-model="menuId" ref="compRef" :menuTypes="menuTypes" @confirm-event="loadMenuInfo(currentMenu.id)" />
    </div>
</template>

<script setup name="Menu">
import { delMenu, listMenu, getMenu } from "@/api/system/menu";
import Description from "./component/description"
import MButtons from './component/buttons.vue'
import MenuEdit from './component/menuEdit.vue'
import CompEdit from './component/componentEdit.vue'
import { ref } from "vue";

const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");

const expandKeys = ref([]);
const menuTree = ref([]);
const menuList = ref([]);
const loading = ref(false);
const globalLoading = ref(false);
const toggleLoading = ref(false);
const isExpandAll = ref(false);
const menuRef = ref();
const currentMenu = ref({ id: undefined, buttons: [], menuType: undefined });
const editRef = ref();
const compRef = ref()
const editable = computed(() => Boolean(currentMenu.value && currentMenu.value.id))
const addable = computed(() => {
    const menu = currentMenu.value;
    return menu && (menu.menuType === 0 || menu.id === undefined);
});
const deleteable = computed(() => Boolean(currentMenu.value.id));
const menuId = ref();
const menuTypes = ref([{
    value: 0,
    label: "目录"
}, {
    value: 1,
    label: "菜单"
}, {
    value: 2,
    label: '按钮'
}])

const queryParams = ref({
    name: undefined,
    visible: undefined,
    menuType: [0, 1]
});



/**重新加载数据 */
const reload = async () => {
    globalLoading.value = true;
    menuList.value = await listMenu(queryParams.value);
    menuTree.value = proxy.handleTree(menuList.value);
    nextTick(async () => {
        console.log(currentMenu.value);
        let defaultMenu = currentMenu.value && currentMenu.value.id ? currentMenu.value : menuTree.value[0];
        let q = { leafNode: true };
        currentMenu.value = await getMenu(defaultMenu.id, q)
        let row = menuList.value.find(item => item.id == currentMenu.value.id);
        menuRef.value.setCurrentRow(row);
        globalLoading.value = false;
    })
}

/** 展开/折叠操作 */
function toggleExpandAll() {
    isExpandAll.value = !isExpandAll.value;
    expandKeys.value = isExpandAll.value ? menuList.value.map(item => String(item.id)) : [];
}


/** 新增菜单操作 */
const handleAddMenu = () => {
    menuId.value = undefined;
    nextTick(() => {
        let opts = { parentId: currentMenu.value.id, menuType: 0 }
        editRef.value.show(opts);
    })
}

/** 新增组件操作 */
const handleAddComponent = () => {
    menuTypes.value = [{
        value: 2,
        label: "按钮"
    }]
    menuId.value = undefined;
    nextTick(() => {
        let opts = { parentId: currentMenu.value.id, menuType: 2 }
        compRef.value.show(opts);
    })
}

/** 编辑菜单操作操作 */
const handleUpdateMenu = (row) => {
    menuId.value = row.id || currentMenu.value.id;
    nextTick(() => {
        editRef.value.show();
    })
}


/** 编辑组件操作操作 */
const handleUpdateComponent = (row) => {
    menuTypes.value = [{
        value: 2,
        label: "按钮"
    }]
    menuId.value = row.id;
    nextTick(() => {
        compRef.value.show();
    })
}

/** 删除按钮操作 */
function handleDelete(row) {
    const menu = row.id ? row : currentMenu.value;
    proxy.$modal.confirm('是否确认删除名称为"' + menu.name + '"的数据项?').then(function () {
        return delMenu(menu.id);
    }).then(() => {
        loadMenuInfo(currentMenu.value.id);
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}


//选中菜单切换
const handleMenuToggle = (row) => {
    if (row.id == currentMenu.value?.id) return;
    loadMenuInfo(row.id);
}


/**重新加载当前菜单信息 */
const loadMenuInfo = (id) => {
    let q = { leafNode: true };
    toggleLoading.value = true;
    return getMenu(id, q).then((res) => {
        currentMenu.value = res;
    }).finally(res => {
        toggleLoading.value = false
    })
}

const onButtonEvents = (action, data) => {
    switch (action) {
        case 'add':
            handleAddComponent();
            break;
        case 'update':
            handleUpdateComponent(data);
            break;
        case 'delete':
            handleDelete(data);
    }
}


reload();
</script>

<style scoped lang="scss">
.tool-wrapper {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--el-border-color);
    text-align: right;
}

.cell-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
</style>


<style lang="scss" scoped>
.splitpanes {
    background-color: transparent !important;
}

.menu-split .splitpanes__pane {
    font-family: Helvetica, Arial, sans-serif;
    background-color: transparent !important;
    transition: none !important;
}

.menu-split .splitpanes__splitter {
    // background-color: transparent !important;
    background-color: var(--el-fill-color) !important;
    border-left: var(--el-border-color) !important;
    width: 4px !important;
}

.ment-split .info-panel .splitpanes__splitter {
    background-color: transparent !important;
    border-left: transparent !important;
}

.menu-panel.splitpanes__pane {
    display: flex;
    flex-direction: column;

    .el-table {
        flex: 1;
    }
}
</style>